<div class="demo-action">
  <button mat-raised-button (click)="addColumn()"> Add column </button>
  <button mat-raised-button (click)="removeColumn()"> Remove column </button>
  <button mat-raised-button (click)="shuffle()"> Shuffle </button>
</div>

<mat-card>
  <table cdk-table [dataSource]="dataSource">
    <ng-container cdkColumnDef="{{column}}" *ngFor="let column of definedColumns">
      <th cdk-header-cell *cdkHeaderCellDef> {{column}} </th>
      <td cdk-cell *cdkCellDef="let element"> {{element[column]}} </td>
    </ng-container>

    <tr cdk-header-row *cdkHeaderRowDef="columnsToDisplay"></tr>
    <tr cdk-row *cdkRowDef="let row; columns: columnsToDisplay;"></tr>
  </table>
</mat-card>
